<template>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item v-for="(item, index) in breadcrumbList" :key="index" :to="index === breadcrumbList.length - 1 ? null : item.path">
      {{ item.meta?.title || item.name }}
    </el-breadcrumb-item>
  </el-breadcrumb>
</template>

<script>
import { ref, watch } from 'vue'
import { useRoute } from 'vue-router'

export default {
  name: 'Breadcrumb',
  setup() {
    const route = useRoute()
    const breadcrumbList = ref([])
    
    // 获取面包屑导航列表
    const getBreadcrumbList = () => {
      const matched = route.matched.filter(item => item.meta && item.meta.title)
      breadcrumbList.value = matched
    }
    
    // 监听路由变化
    watch(
      () => route.path,
      () => {
        getBreadcrumbList()
      },
      { immediate: true }
    )
    
    return { breadcrumbList }
  }
}
</script>

<style scoped>
.el-breadcrumb {
  display: inline-block;
  font-size: 14px;
  line-height: 1.5;
  margin-left: 8px;
}
</style> 